<!DOCTYPE HTML>
<!--[if IE 6]>
<html id="ie6" lang="en-US" class="ie ie6 lt-ie9">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" lang="en-US" class="ie ie7 lt-ie9">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" lang="en-US" class="ie ie8 lt-ie9">
<![endif]-->
<!--[if gte IE 9]>
<html lang="en-US" class="ie ie9">
<![endif]-->
<!--[if !(IE)]><!-->
<html lang="en-US" class="">
<!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0 minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="author" content="marcolago">

	<meta name="description" content="Flowtime.js is an open source framework for easily build HTML presentations or websites. It’s built with web standards in mind and on top of a solid full page grid layout powered by CSS3 hardware accelerated transition and comes with a complete set of Javascript API for deep customization.">

	<title>Flowtime.js - Overflow Scroll Demo</title>
	<link rel="stylesheet" href="../../assets/css/reset.css">
	<link rel="stylesheet" href="../../css/flowtime.css">
	<link rel="stylesheet" href="../../css/themes/default.css">
	<link rel="stylesheet" href="css/custom.css">

  <style>
    .flowtime .overflow {
      overflow: auto;
    }
  </style>

</head>
<body class="">

	<div class="flowtime">
		<div class="ft-section" data-id="section-1">
			<div id="/section-1/page-1" class="ft-page" data-id="page-1">
				<h1>Overflow Scroll Demo</h1>
				<p>This presentation has just one section with five pages. Page 3 has a sub page that is not part of the main structure flow (it is not an <code>.ft-page</code>) so is not reachable by Flowtime.js logic but only by custom navigation.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div id="/section-1/page-2" class="ft-page" data-id="page-2">
				<h1>Page 2</h1>
			</div>
			<div id="/section-1/page-3" class="ft-page" data-id="page-3">
				<h1>Page 3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div id="/section-1/page-4" class="ft-page" data-id="page-4">
				<h1>Page 4</h1>
			</div>
			<div id="/section-1/page-5" class="ft-page" data-id="page-5">
				<h1>Page 5</h1>
			</div>
		</div>
	</div>

	<script src="../../js/brav1toolbox.js"></script>
	<script src="../../js/flowtime.js"></script>

	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-1228618-10']);
		_gaq.push(['_trackPageview']);
		_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
		(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

		// Configuration API test
		Flowtime.showProgress(true);
		// Flowtime.fragmentsOnSide(true);
		// Flowtime.fragmentsOnBack(true);
		// Flowtime.useHistory(false);
		// Flowtime.slideInPx(true);
		// Flowtime.sectionsSlideToTop(true);
		// Flowtime.gridNavigation(false);
		// Flowtime.useOverviewVariant(true);
		// Flowtime.parallaxInPx(true);
		// Flowtime.clicker(true);
		//
		// event management
		// Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
		// starts the application with configuration options
    Flowtime.disableNavigation(false, false, false, false);
		Flowtime.start();
	</script>
</body>
</html>
